<template>
  <div class="city full-screen">
    <nav-bar>
      <span slot="text">选择城市</span>
    </nav-bar>
    <div class="search">
      <i class="iconfont icon-sousuo"></i>
      <input
        type="text"
        placeholder="输入城市地址试试看"
        v-model.trim="searchName"
      />
    </div>
    <scroll class="content" ref="scroll" @scroll="scroll" :type="3">
      <div class="container">
        <div class="city_name">
          <ul v-for="(item, index) in cityList" :key="index" ref="cityList">
            <p class="pinyin">{{ item.title }}</p>
            <li
              v-for="(city, i) in item.city"
              :key="i"
              @click="selectCity(city)"
            >
              <span>{{ city.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </scroll>
    <!-- 导航栏 -->
    <div class="nav_list">
      <ul>
        <li v-for="(item, index) in initLals" :key="index" @click="roll(index)">
          <span :class="{ active: index === currentIndex }">{{ item }}</span>
        </li>
      </ul>
    </div>
    <!-- 搜索列表 -->
    <div class="search_list" v-if="searchList.length">
      <ul>
        <li
          v-for="(item, index) in searchList"
          :key="index"
          @click="selectCity(item)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll';

import { Local } from '@/common/storage';
import { getCity, searchCityName } from '@/network/getData';

export default {
  data() {
    return {
      cityList: [], // 城市列表
      initLals: [], // 字母列表
      cityTops: [], // 每个城市列表的Top值
      scrollY: 0, // 当前滚动的位置
      searchName: '', // 搜索关键字
      searchList: [] // 搜索城市列表
    };
  },
  components: { Scroll },
  created() {
    this.initData();
  },
  computed: {
    currentIndex() {
      const index = this.cityTops.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.cityTops[index + 1];
      });
      return index;
    }
  },
  methods: {
    // 初始化数据
    initData() {
      getCity().then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.initLals.push(res.data[i].title);
        }
        this.cityList = res.data;
      });
    },
    // 滚到对对应的位置
    roll(index) {
      const y = this.cityTops[index];
      this.$refs.scroll.scrollTo(0, -y);
    },
    // 滚动触发
    scroll(position) {
      this.scrollY = Math.abs(position.y);
    },
    selectCity(data) {
      Local.set('city', data);
      this.$router.go(-1);
    }
  },
  watch: {
    // 监听数据加载
    cityList() {
      this.$nextTick(() => {
        const list = this.$refs.cityList;
        let num = 0;
        this.cityTops.push(num);
        for (let i = 0; i < list.length; i++) {
          num += list[i].clientHeight + 15;
          this.cityTops.push(num);
        }
        this.$refs.scroll.refresh();
      });
    },
    // 监听表单输入
    searchName(value) {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        if (value !== '') {
          searchCityName(value).then(res => {
            this.searchList = res.data;
          });
        } else {
          this.searchList = [];
        }
      }, 200);
    }
  }
};
</script>

<style lang="less" scoped>
.city {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

.search {
  position: relative;
  z-index: 50;
  padding: 55px 10px 20px;
  font-size: var(--font-size);
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  input {
    width: 100%;
    height: 100%;
    padding: 7px 10px;
    text-indent: 25px;
    border-radius: 6px;
    background-color: #eee;
  }
  i {
    position: absolute;
    bottom: 28px;
    left: 20px;
    font-size: 15px;
  }
}

.content {
  height: calc(100% - 75px);
  padding: 0 10px;
  .container {
    ul {
      padding-right: 22px;
      font-size: var(--font-size);
      .pinyin {
        margin: 15px 0;
      }
      li {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}

.nav_list {
  position: fixed;
  top: 55%;
  right: 10px;
  transform: translateY(-50%);
  font-size: var(--font-min);
  text-align: center;
  li {
    margin-bottom: 8px;
    span {
      padding: 0px 2px;
      border-radius: 5px;
    }
  }
}

.search_list {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background-color: #fff;
  li {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #c5c5c5;
  }
}
.active {
  background-color: #ccc;
}
</style>
